@use 'sass:color';
@use 'var';
@use 'mixins';

#content .table-contents {
  white-space: nowrap;
  li a {
    display: block;
    border-radius: var.$border-radius-medium;
    padding: 0.5rem 1rem;
    color: var.$navbar-dark;
    @include mixins.transition((color, background-color), 0.15s);

    &:hover {
      text-decoration: none;
      background-color: var.$border-light;
    }
  }

  nav {
    @include mixins.remove-focus;
  }

  &__header {
    display: none;
  }

  [class^='contents-list'] {
    @include mixins.reset-list;
    li {
      line-height: 1.1;
    }
  }

  .contents-list-lv1 {
    overflow-x: hidden;
    overflow-y: auto;
    font-size: 1.1rem;
    font-weight: bold;
    box-sizing: border-box;
    padding: 0.5rem 1rem 2rem 1rem;

    @include mixins.scrollbar(6px);
    &:not(:hover) {
      &::-webkit-scrollbar-thumb {
        background-color: transparent;
      }
      &::-webkit-scrollbar-track {
        background-color: transparent;
      }
    }
    > li {
      margin: 0.5rem 0;
    }
  }

  .contents-list-lv2 {
    font-size: 1rem;
    font-weight: normal;
    & > li > a:has(+ .contents-list-lv3) {
      margin-top: 2rem;
      font-weight: bold;
    }
  }

  .contents-list-lv3 a {
    font-size: 0.95rem;
    &:not(:hover) {
      color: color.scale(var.$navbar-dark, $lightness: 15%);
    }
  }

  &--theme-dark {
    li a {
      color: var.$navbar-light;
      &:hover {
        background-color: var.$border-dark;
      }
    }
    .contents-list-lv3 a:not(:hover) {
      color: color.scale(var.$navbar-light, $lightness: -15%);
    }

    .contents-list-lv1 {
      @include mixins.scrollbar-dark;
    }
  }
}
